{% block sw_customer_base_form %}
<div class="sw-customer-base-form">
    <sw-container
        columns="repeat(auto-fit, minmax(250px, 1fr))"
        gap="0px 32px"
    >
        {% block sw_customer_base_form_account_type_field %}
        <sw-single-select
            v-model:value="customer.accountType"
            name="sw-field--customer-accountType"
            class="sw-customer-base-form__account-type-select"
            :label="$tc('sw-customer.customerType.labelAccountType')"
            :placeholder="$tc('sw-customer.customerType.placeholderAccountType')"
            :options="accountTypeOptions"
        />
        {% endblock %}

        <sw-container
            columns="1fr 1fr"
            class="sw-customer-base-form__first-item sw-customer-base-form__first-item--full"
        >
            {% block sw_customer_base_form_first_salutation_field %}
            <sw-entity-single-select
                v-model:value="customer.salutationId"
                name="sw-field--customer-salutationId"
                class="sw-customer-base-form__salutation-select"
                entity="salutation"
                :label="$tc('sw-customer.baseForm.labelSalutation')"
                :placeholder="$tc('sw-customer.baseForm.placeholderSalutation')"
                :error="customerSalutationIdError"
                :criteria="salutationCriteria"
                label-property="displayName"
            />
            {% endblock %}

            {% block sw_customer_base_form_title_field %}

            <mt-text-field
                v-model="customer.title"
                name="sw-field--customer-title"
                :label="$tc('sw-customer.baseForm.labelTitle')"
                :placeholder="$tc('sw-customer.baseForm.placeholderTitle')"
            />
            {% endblock %}
        </sw-container>

        {% block sw_customer_base_form_first_name_field %}

        <mt-text-field
            v-model="customer.firstName"
            name="sw-field--customer-firstName"
            required
            :label="$tc('sw-customer.baseForm.labelFirstName')"
            :placeholder="$tc('sw-customer.baseForm.placeholderFirstName')"
            :error="customerFirstNameError"
        />
        {% endblock %}

        {% block sw_customer_base_form_last_name_field %}

        <mt-text-field
            v-model="customer.lastName"
            name="sw-field--customer-lastName"
            required
            :label="$tc('sw-customer.baseForm.labelLastName')"
            :placeholder="$tc('sw-customer.baseForm.placeholderLastName')"
            :error="customerLastNameError"
        />
        {% endblock %}

        {% block sw_customer_base_form_email_field %}
        <mt-email-field
            v-model="customer.email"
            name="sw-field--customer-email"
            required
            :label="$tc('sw-customer.baseForm.labelEmail')"
            :placeholder="$tc('sw-customer.baseForm.placeholderEmail')"
            :error="customerEmailError"
        />
        {% endblock %}

        {% block sw_customer_base_form_password_field %}
        <mt-password-field
            v-model="customer.password"
            name="sw-field--customer-password"
            autocomplete="new-password"
            :required="!customer.guest"
            :disabled="customer.guest"
            :label="$tc('sw-customer.baseForm.labelPassword')"
            :placeholder="$tc('sw-customer.baseForm.placeholderPassword')"
            :error="customerPasswordError"
        />
        {% endblock %}

        {% block sw_customer_base_form_vat_id_field %}

        <mt-text-field
            v-if="isBusinessAccountType"
            id="vatId"
            v-model="customer.vatIds[0]"
            name="vatId"
            :error="customerVatIdsError"
            :label="$tc('sw-customer.addressForm.labelVatId')"
            :placeholder="$tc('sw-customer.addressForm.placeholderVatId')"
        />
        {% endblock %}

        {% block sw_customer_base_form_birthday_field %}
        <mt-datepicker
            v-model="customer.birthday"
            type="date"
            name="birthday"
            hide-hint
            :label="$tc('sw-customer.baseForm.labelBirthday')"
            :placeholder="$tc('sw-datepicker.date.placeholder')"
        />
        {% endblock %}

        {% block sw_customer_base_form_customer_group_field %}
        <sw-entity-single-select
            v-model:value="customer.groupId"
            name="sw-field--customer-groupId"
            class="sw-customer-base-form__customer-group-select"
            required
            show-clearable-button
            entity="customer_group"
            :label="$tc('sw-customer.baseForm.labelCustomerGroup')"
            :placeholder="$tc('sw-customer.baseForm.placeholderCustomerGroup')"
            :error="customerGroupIdError"
        />
        {% endblock %}

        {% block sw_customer_base_form_sales_channel_field %}
        <sw-entity-single-select
            class="sw-customer-base-form__sales-channel-select"
            entity="sales_channel"
            :label="$tc('sw-customer.baseForm.labelSalesChannel')"
            :placeholder="$tc('sw-customer.baseForm.placeholderSalesChannel')"
            :value="customer.salesChannelId"
            :error="customerSalesChannelIdError"
            required
            show-clearable-button
            @update:value="onSalesChannelChange"
        />
        {% endblock %}

        {% block sw_customer_base_form_customer_number_field %}

        <mt-text-field
            v-model="customer.customerNumber"
            name="sw-field--customer-customerNumber"
            :label="$tc('sw-customer.baseForm.labelCustomerNumber')"
            :placeholder="$tc('sw-customer.baseForm.placeholderCustomerNumber')"
            :error="customerCustomerNumberError"
            required
        />
        {% endblock %}
    </sw-container>

    {% block sw_customer_base_form_tag_field %}
    <sw-entity-tag-select
        v-model:entity-collection="customer.tags"
        name="sw-field--customer-tags"
        :label="$tc('sw-customer.baseForm.labelTags')"
        :placeholder="$tc('sw-customer.baseForm.placeholderTags')"
    />
    {% endblock %}
</div>
{% endblock %}
